import React from 'react';
import {Table, Icon,Button,Tooltip,Row,Col,Input,Select,DatePicker,Radio,Dropdown,Menu,Steps,Modal,Popconfirm,Tabs} from 'antd';
import MyIcon from 'MyIcon/MyIcon';
import AddressSelect from '../../components/common/AddressSelect/AddressSelect';

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const { MonthPicker, RangePicker } = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;

import data from './data';
import CuserInfo from '../cuserinfo/index';  //月嫂详情
import CuserAdd from '../cuseradd/index';  //新增月嫂


export default class CuserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Colvisible: false,       // 更改列显示
            //右侧滑层
            isShowRightCuserInfo:false,      //客户详情
            isShowRightCuserAdd:false,      //新增客户
        };
    }
    //更改列显示
    handleMenuClick = (e) => {
        if (e.key === '3') {
            this.setState({ Colvisible: false });
        }
    }
    handleVisibleChange = (flag) => {
        this.setState({ Colvisible: flag });
    }
    //---右侧滑层
    //订单详情
    RightCuserInfo = (e) => {
        this.setState({
            'isShowRightCuserAdd':false,
            'isShowRightCuserInfo': !this.state.isShowRightCuserInfo,
        })
    }
    RightCuserInfoClose = (e) => {
        this.setState({
            'isShowRightCuserInfo':false,
        })
    }
    //右侧滑层-新增订单
    RightCuserAdd = (e) => {
        this.setState({
            'isShowRightCuserInfo':false,
            'isShowRightCuserAdd': true,
        })
    }
    RightCuserAddClose = (e) => {
        this.setState({
            'isShowRightCuserInfo':false,
            'isShowRightCuserAdd': false,
        })
    }
    render(){
        //修改列显示
        const menu = (
            <Menu>
                <Menu.Item key="1">批量删除</Menu.Item>
                <Menu.Item key="2">批量恢复</Menu.Item>
                <Menu.Item key="3">移入黑名单</Menu.Item>
                <Menu.Item key="4">移出黑名单</Menu.Item>
            </Menu>
        );
        let that = this;
        let orderList = data.cuserListTable;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [
            {
                title: '头像',
                dataIndex: 'cuserPicture',
                key: 'cuserPicture',
                render:(value)=>{
                    return(
                        <a href="javascript:void(0);" onClick={that.RightCuserInfo}>
                            <img className="tx" src={value} width="45" height="45" alt="客户头像"/>
                        </a>
                    )
                },
                className:'ant-table-th-center'
            },{
                title: '姓名',
                dataIndex: 'cuserName',
                key: 'cuserName',
            },
            {
                title: '性别',
                dataIndex: 'cuserSex',
                key: 'cuserSex',
                className:'ant-table-th-center'
            }, {
                title: '联系方式',
                dataIndex: 'cuserPhone',
                key: 'cuserPhone',
                render:(value)=>{
                    return (
                        <div className="table-contact">
                            <Tooltip placement="top" title={value}>
                                <span className="phone-span"><MyIcon type="phone"/></span>
                            </Tooltip>
                            <Tooltip placement="top" title={value}>
                                <span className="phone-span"><MyIcon type="qq"/></span>
                            </Tooltip>
                        </div>
                    )
                },
                className:'ant-table-th-center'
            }, {
                title: '服务地址',
                dataIndex: 'Address',
                key: 'Address',
                render:(value)=>{
                    return (
                        <div className="table-address">
                            {
                                value.length > 16 ? <Tooltip placement="topLeft" title={value}><span>{value ? value.substr(0, 16) : ''}</span></Tooltip> : <span>{value}</span>
                            }
                        </div>
                    )
                },
                width:200,
            }
            ,{
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                className:'ant-table-th-center'
            },
            {
                title: '操作',
                dataIndex: 'operation',
                key: 'operation',
                // fixed:'right',
                className:'ant-table-th-center',
                render:()=>{
                    return(
                        <div className="table-a-cont">
                            <a href="javascript:void(0)">编辑</a>
                            <Popconfirm placement="topRight" title="确定删除?">
                                <a href="javascript:void(0)">删除</a>
                            </Popconfirm>
                        </div>
                    )
                },
            }];
        // rowSelection object indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
            },
            getCheckboxProps: record => ({
                //disabled: record.name === 'Disabled User',    // Column configuration not to be checked
            }),
        };
        const pagination = {
            // total: this.state.tDate.length,
            total: 20,
            showSizeChanger: true,
        }
        return(
           <div>
               <h3 className="title-h3">客户管理</h3>
               <Tabs defaultActiveKey="1">
                   <TabPane tab="全部客户" key="1">
                       {/*搜索*/}
                       <div className="search-cont">
                           <Row gutter={16}>
                               <Col span="4">
                                   <Input placeholder="客户姓名..." size="large" />
                               </Col>
                               <Col span="4">
                                   <Select defaultValue="选择性别" size="large">
                                       <Option value="选择性别">选择处理人选择处理人选择处理人选择处理人</Option>
                                       <Option value="男">男</Option>
                                       <Option value="女">女</Option>
                                   </Select>
                               </Col>
                               <Col span="4">
                                   <RangePicker  size="large"/>
                               </Col>
                               <Col span="4">
                                   <AddressSelect  />
                               </Col>
                               <div className="search-btncont search-btncontfr">
                                   <Button size="large" type="primary">搜索</Button>
                               </div>
                           </Row>
                       </div>
                       {/*列表按钮*/}
                       <div className="search-cont2">
                           <ButtonGroup>
                               <Button onClick={this.RightCuserAdd}>新增客户</Button>
                               <Dropdown overlay={menu} onVisibleChange={this.handleVisibleChange}
                                         visible={this.state.Colvisible}>
                                   <Button>
                                       批量操作 <Icon type="down" />
                                   </Button>
                               </Dropdown>
                           </ButtonGroup>
                       </div>
                       {/*表格*/}
                       <Table rowSelection={rowSelection} columns={columns} dataSource={orderList.toJS()} bordered pagination={pagination} />
                       {/*月嫂详情*/}
                       <div className={this.state.isShowRightCuserInfo ? 'rightSlip rightSlip-nofoot animated fadeInRight' : 'rightSlip rightSlip-nofoot animated fadeOutRight'}>
                           <a href="javascript:void(0)" className="rightSlipClose" onClick={this.RightCuserInfoClose}><Icon type="close" /></a>
                           <CuserInfo />
                       </div>
                       {/*新增月嫂*/}
                       <div className={this.state.isShowRightCuserAdd ? 'rightSlip animated fadeInRight' : 'rightSlip animated fadeOutRight'}>
                           <a href="javascript:void(0)" className="rightSlipClose" onClick={this.RightCuserAddClose}><Icon type="close" /></a>
                           <CuserAdd />
                       </div>
                   </TabPane>
                   <TabPane tab="黑名单" key="2">黑名单小金鱼还没写</TabPane>
               </Tabs>
               {/*弹窗--分配订单*/}
               <Modal
                   title="分配订单"
                   wrapClassName="vertical-center-modal"
                   visible={this.state.ModalDistribution}
                   onCancel={() => this.showModalDistribution(false)}
                   width="570 + 32"
                   footer={[
                       <Button key="back" size="large">取消</Button>,
                       <Button key="submit" type="primary" size="large">
                           确认分配
                       </Button>,
                   ]}
               >
                   <Search
                       placeholder="搜索公司名"
                       size="large"
                   />
                   <div className="distribution-name">
                       <ul>
                           <li className="active">快易洁</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                           <li>本木到家</li>
                       </ul>
                   </div>
               </Modal>
          </div>
        )
  }
}
